<template>
  <div class="container">
    <div :style="getimg(this.picUrl)" class="head">
      <div class="header">
        <div class="return">
          <i @click="$router.back(-1)" class="iconfont icon-dajiantouzuo"></i>
          <span>歌单</span>
          <i class="iconfont icon-shuju"></i>
        </div>
        <div class="Avatar-name">
          <div :style="getimg()" class="avatar"></div>
          <div class="text">{{ this.name }}</div>
        </div>
        <div class="Detailed-dynamic">
          <div class="subscription">
            <i class="iconfont icon-shoucang"></i>
            <span>{{ this.bookedCount }}</span>
          </div>
          <div class="comments">
            <i class="iconfont icon-liaotian"></i>
            <span>{{ this.commentCount }}</span>
          </div>
          <div class="share">
            <i class="iconfont icon-fenxiang"></i>
            <span>{{ this.shareCount }}</span>
          </div>
          <div class="download">
            <i class="iconfont icon-xiazai1"></i>
            <span>下载</span>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="Play-all">
        <div class="left">
          <i class="iconfont icon-bofang"></i>
          <span class="text">播放全部</span>
          <span class="statistical">(共{{ songslength }}首)</span>
        </div>
        <i class="iconfont icon-suoyoudingdan"></i>
      </div>
      <div class="bottom">
        <div class="items">
          <div v-for="(item, index) in showsongs" :key="item.id" class="song">
            <div class="index">{{ getindex(index) }}</div>
            
            <router-link
            :to="{
            path:'/play',
            query:{
            url:item.al.picUrl
            }
          }
            "
          >
          
          <div class="song-detail">
              <span class="top">{{ item.name }}</span>
              <div class="singers">
                <span v-for="p in item.ar" :key="p.id" class="singer">{{
                  p.name
                }}</span>
              </div>
            </div>
          </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getlistDetail } from "../../api/getPlaylistDetail";
import { getListDynamic } from "../../api/getListDynamic";
import { getSongDetail } from "../../api/getSongDetail";
export default {
  data() {
    return {
      id: "",
      name: "",
      picUrl: "",
      bookedCount: "",
      commentCount: "",
      shareCount: "",
      collectsongs: [],
      showsongs: [],
      songslength: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    getlistDetails() {
      // 获取歌单的id name picUrl
      this.id = this.$route.query.id;
      this.name = this.$route.query.name;
      this.picUrl = this.$route.query.url;

      // 传入歌单id
      getlistDetail(this.id).then((res) => {
        // console.log(res);
        this.songslength = res.data.privileges.length;
        res.data.privileges.forEach((element) => {
          // 收集歌单中歌曲的id
          this.collectsongs.push(element.id);
        });
        // 收集歌单中歌曲的id并调接口
        this.collectsongs.forEach((element) => {
          // console.log(element);
          getSongDetail(element).then((res) => {
            // console.log(res);
            this.showsongs.push(res.data.songs[0]);
          });
        });
        // console.log(this.showsongs);
      });
      // console.log(this.songs);
    },
    getimg() {
      console.log();
      return {
        backgroundImage: "url(" + this.picUrl + ")",
      };
    },
    getListDynamic() {
      getListDynamic(this.id).then((res) => {
        // console.log(res);
        this.bookedCount = res.data.bookedCount;
        this.commentCount = res.data.commentCount;
        this.shareCount = res.data.shareCount;
      });
    },
    getSongdetail() {},
    getindex(val) {
      return val + 1;
    },
  },
  created() {
    this.getlistDetails();
    this.getimg();
    this.getListDynamic();
    this.getSongdetail();
  },
  mounted() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  .head {
    height: 35%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .header {
      height: 100%;
      padding: 10px 10px 0px 10px;
      backdrop-filter: blur(12px);
      .return {
        display: flex;
        justify-content: space-between;
        .icon-dajiantouzuo {
          font-size: 25px;
        }
        .icon-shuju {
          font-size: 25px;
        }
        span {
          font-size: 20px;
          color: rgb(233, 222, 222);
        }
      }
      .Avatar-name {
        margin-top: 15px;
        padding: 15px 15px 10px 5px;
        height: 65%;
        box-sizing: border-box;
        display: flex;
        .avatar {
          height: 150px;
          width: 150px;
          background-repeat: no-repeat;
          background-size: 100%;
          margin-right: 15px;
        }
        .text {
          color: rgb(237, 231, 231);
          font-size: 18px;
          height: 150px;
          padding-top: 40px;
          box-sizing: border-box;
        }
      }
      .Detailed-dynamic {
        display: flex;
        justify-content: space-around;
        span {
          color: rgb(232, 222, 222);
          font-size: 18px;
          margin-top: 5px;
        }
        .subscription {
          display: flex;
          flex-direction: column;
          .icon-shoucang {
            font-size: 25px;
            color: rgb(246, 236, 236);
          }
        }
        .comments {
          display: flex;
          flex-direction: column;
          .icon-liaotian {
            font-size: 25px;
            color: rgb(246, 236, 236);
          }
        }
        .share {
          display: flex;
          flex-direction: column;
          .icon-fenxiang {
            font-size: 25px;
            color: rgb(246, 236, 236);
          }
        }
        .download {
          display: flex;
          flex-direction: column;
          .icon-xiazai1 {
            font-size: 25px;
            color: rgb(246, 236, 236);
          }
        }
      }
    }
  }
  .main {
    height: 60%;
    padding: 20px 20px 10px 20px;
    .Play-all {
      height: 35px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgb(239, 229, 230);
      .text {
        margin-left: 10px;
        font-size: 20px;
        color: rgb(39, 36, 36);
      }
      .statistical {
        color: rgb(130, 122, 122);
      }
      .icon-bofang {
        font-size: 23px;
        color: rgb(110, 104, 104);
      }
      .icon-suoyoudingdan {
        font-size: 25px;
      }
    }
    .items {
      height: 450px;
      overflow: auto;
      .song {
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgb(239, 229, 230);
        .song-detail {
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          .top {
            text-align: left;
            color: #000;
          }
          .singers {
            display: flex;
            color: rgb(176, 171, 171);
            .singer {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-active {
  opacity: 0;
  transition: opacity 0.5s;
}
</style>
